<template>
  <div class="warning-container" v-loading="isloading">
    <div class="selectHeader">
      <div class="select-wrapper">
        <div class="selectBox">
          <div class="selectTitle">
            <i class="iconfont icon-sousuo" />按条件查询
          </div>
          <el-form
            ref="form"
            :model="form"
            label-width="150px"
            label-position="left"
          >
            <el-row>
              <el-col :sm="12" :md="12" :lg="6" :xl="6">
                <el-form-item label="编制单位名称:">
                  <el-input
                    v-model="listquery.agreeNickName"
                    clearable
                    style="width: 80%"
                    @change="valueChange"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="12" :md="12" :lg="6" :xl="6">
                <el-form-item label="村庄名称:">
                  <el-input
                    v-model="listquery.village"
                    clearable
                    style="width: 80%"
                    @change="valueChange"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="12" :md="12" :lg="6" :xl="6">
                <el-form-item label="任务年度:" class="lastaaa">
                  <el-select
                    v-model="listquery.completionYear"
                    size="mini"
                    clearable
                    filterable
                    @change="valueChange"
                    default-first-option
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in years"
                      :label="item"
                      :value="item"
                      :key="index"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :sm="12" :md="12" :lg="6" :xl="6">
                <el-form-item label="预警类型:" class="lastaaa">
                  <el-select
                    v-model="listquery.iCheckType"
                    size="mini"
                    @change="valueChange"
                    default-first-option
                    placeholder="请选择"
                  >
                    <el-option label="超时" value="1"> </el-option>
                    <el-option label="超期" value="2"> </el-option>
                    <el-option label="全部" value="3"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="行政区划选择:">
                  <div class="row-area">
                    <el-select
                      placeholder="所属市选择"
                      v-model="currentLiindex"
                      @change="cityChange"
                      v-if="iscityshow"
                      clearable
                      @clear="cityclear"
                    >
                      <el-option
                        v-for="(item, index) in citylist"
                        :key="item.id"
                        :label="item.label"
                        :value="index"
                      />
                    </el-select>
                    <ul class="countryArea" v-if="areaShow">
                      <li
                        v-for="(item, i) in cityChildren"
                        :key="i"
                        @click="liChange(i)"
                        :class="{ areaActive: i == currentareaindex }"
                      >
                        {{ item.label }}
                      </li>
                    </ul>
                    <el-select
                      placeholder="乡镇选择"
                      v-model="town"
                      @change="townChange"
                      v-if="istownshow"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in townlist"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <div v-if="filterShow">
              <el-form-item label="阶段预警:">
                <el-radio-group
                  v-model="listquery.nodName"
                  size="small"
                  @change="getdata"
                >
                  <el-radio label="" border>全部</el-radio>
                  <el-radio
                    style="margin: 0 5px 5px 0"
                    border
                    v-for="(item, index) in smalljieduans"
                    :key="index"
                    :label="item.name"
                    >{{ item.nameDate }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </div>
          </el-form>

          <div class="icondiv">
            <span v-show="filterShow" @click="filterShow = false">
              收起
              <i class="el-icon-arrow-up"></i>
            </span>
            <span v-show="!filterShow" @click="filterShow = true">
              更多
              <i class="el-icon-arrow-down"></i>
            </span>
          </div>
          <!-- <div class="searchBox2">
            <div class="daoButton" @click="download">
              <img src="@/assets/daochu.png" alt="" />
              <span>导出</span>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="header">
      <div><i class="el-icon-d-arrow-right"></i>预警信息详情</div>
      <el-button size="small" type="primary" @click="updateTable">
        <i class="el-icon-refresh"></i>刷新列表</el-button
      >
    </div>
    <div class="totalmessage">
      <span v-if="listquery.completionYear != ''"
        >{{ listquery.completionYear }}年度</span
      >
      <span v-if="listquery.city != ''">{{ listquery.city }}</span>
      <span v-if="listquery.country != ''">{{ listquery.country }}</span>
      <span v-if="listquery.town != ''">{{ listquery.town }}</span>
      <span>辖区的村庄</span
      ><span v-if="listquery.nodName != ''">{{ listquery.nodName }}阶段</span
      ><span>共有{{ total }}个村庄预警</span>
    </div>
    <!-- 您辖区的村庄其中有<span class="warnig-num">{{
          warnningvillagetotal
          }}</span>个村庄被预警，请点击预警详情了解并及时跟进！ -->

    <!-- <el-button type="text" @click="download" class="elbutton"><i class="el-icon-download"></i>导出</el-button> -->

    <el-dialog
      title="注意"
      :visible.sync="dialogVisible"
      width="30%"
      :append-to-body="true"
    >
      <!-- <span>{{ warningMessage }}</span> -->
      <div>
        <p v-for="(item, index) in warningdata" :key="index">
          <span><i class="el-icon-warning redicon"></i></span>【<span
            class="redicon"
            >{{ item.name }}</span
          >】阶段 截止日期为【<span class="redicon">{{ item.date }}</span
          >】
          <span v-if="item.day > 0 && item.count < 100"
            >距离截止日期还有<span class="redicon">{{ item.day }}</span
            >天，请加快进度</span
          >
          <span v-if="item.day < 0 && item.count < 100"
            >已超过截止日期<span class="redicon">{{ item.day * -1 }}</span
            >天，请补充完成进度并及时上报原因</span
          >
          <span v-if="item.day < 0 && item.count == 100"
            >完成历史时间超过截止日期<span class="redicon">{{
              item.day * -1
            }}</span
            >天</span
          >
          <!-- <span v-else>今天是截止日期，请在今日之前上传进度包</span> -->
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div>
      <el-table
        :data="tableData"
        border
        row-key="id"
        style="width: 100%"
        class="eltable"
        :span-method="objectSpanMethod"
        :default-expand-all="isExpand"
        @expand-change="expand"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
           <el-table-column label="序号" width="100"  prop="id">
        <template  slot-scope="{$index}">
          <span>{{$index+1}}</span>
        </template>
        </el-table-column>
        <el-table-column label="所属行政区划" width="220">
          　<template slot-scope="scope">
            <span
              >{{ scope.row.city }}-{{ scope.row.country }}-{{
                scope.row.town
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="village" label="村庄名" width="150" />
        <el-table-column prop="warning" label="预警详情" width="150">
          <template
            slot-scope="scope"
            v-if="scope.row.warningData && scope.row.warningData.length > 0"
          >
            <el-button
              type="warning"
              icon="el-icon-message-solid"
              @click="query(scope.row)"
              circle
            ></el-button>
            　
          </template>
        </el-table-column>
        <el-table-column
          prop="warning"
          label="原因上报"
          width="150"
          v-if="role == '区县用户'"
        >
          <template slot-scope="scope">
            <!-- <el-button
              type="text"
              @click="query(scope.row)"
              class="elbutton warn"
              ><i class="el-icon-search"></i
            ></el-button> -->
            <el-button
              type="primary"
              icon="el-icon-position"
              @click="inputreason(scope.row)"
              circle
            ></el-button>
            <!-- <div v-else>
              <p
                style="margin: 0"
                v-for="s in scope.row.warning.split(',')"
                :key="s"
              >
                {{ s.replace("|", "：") }}
              </p>
              <el-button
                type="primary"
                size="mini"
                @click="inputreason(scope.row)"
                >重新上报</el-button
              >
            </div> -->
          </template>
        </el-table-column>

        <el-table-column label="阶段完成进度[阶段当前年度截止日期">
          <el-table-column
            v-for="item in rateArr"
            :key="item"
            prop=""
            :label="item"
            width="160"
          >
            <template slot-scope="scope">
              <div
                @click="openstate(scope.row.id, item.split('[')[0])"
                :class="[
                  scope.row.progressNames[item.split('[')[0]]
                    ? 'active'
                    : 'noclick',
                  'progressli',
                ]"
              >
                <el-progress
                  :percentage="scope.row.progressNames[item.split('[')[0]]"
                  :format="format"
                  text-inside
                  :color="customColorMethod"
                ></el-progress>
                <span
                  v-if="
                    scope.row.warningData &&
                    scope.row.warningData[item.split('[')[0]] &&
                    scope.row.warningData[item.split('[')[0]].day
                  "
                  :class="[
                    warnState[scope.row.warningData[item.split('[')[0]].state],
                    'spanicon',
                  ]"
                  >{{ scope.row.warningData[item.split("[")[0]].day }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column
          prop="warning"
          label="预警原因查看"
          width="150"
          v-if="role == '自然资源厅用户' || role == '超级管理员'"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-search"
              v-if="scope.row.warning"
              @click="searchreason(scope.row)"
              circle
            ></el-button>
            <span v-else style="color: red">暂未上报原因</span>
            　
          </template>
        </el-table-column>

        <el-table-column prop="completionYear" label="任务年限" width="220" />

        <el-table-column
          prop="nickName"
          label="所属编制单位(联系人+电话)"
          width="340"
        >
          　<template slot-scope="scope">
            <div v-if="scope.row.profileData.length > 0">
              <p
                style="margin: 2px 0"
                v-for="v in scope.row.profileData"
                :key="v.profileName"
              >
                {{ v.profileName }}(联系人:{{ v.contactName }} 电话:{{
                  v.contactPhone
                }})
              </p>
            </div>
            <span v-else>暂未关联</span>
          </template>
        </el-table-column>
      </el-table>
      <right-div
        :list="resultList"
        v-if="rightPanelShow"
        @closeRightPanel="closeRightPane"
        :title="title"
      ></right-div>
      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getdata"
        @current-change="getdata"
        @prev-click="getdata"
        @next-click="getdata"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
    </div>
    <el-dialog
      title="填写进度未及时完成原因"
      :visible.sync="reasondialogVisible"
      width="40%"
      :append-to-body="true"
    >
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入内容"
        v-model="reason"
      >
      </el-input>

      <!-- <div v-for="(item, i) in chaoqidata" :key="i" style="margin-bottom: 10px">
        <span style="font-weight: 600">{{ item.name }}</span
        ><span style="margin-right: 10px"> : </span>
        <el-select
          v-if="reasondialogVisible"
          v-model="reason[i]"
          placeholder="请选择"
        >
          <el-option
            v-for="option in reasonOptions"
            :key="option"
            :label="option"
            :value="option"
          >
          </el-option>
        </el-select>
      </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="reasondialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitWarnReason">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import tableHeader from "../components/TableHeader";
import { areaprogresswarninglist } from "@/api/index.js";
import { flashwarningdata } from "@/api/yujing.js";
import { villagewarning, getnowwarning } from "@/api/notice.js";
import { mapGetters } from "vuex";
import queryMixin from "@/mixins/countquery.js";
import rightDiv from "@/views/unitIndex/components/rightDiv";
export default {
  mounted() {
    this.AAA  = new Map()
    this.role = this.$store.getters.user.roles[0].name;
    this.getdata();

    getnowwarning().then((res) => {
      let result = res.data;
      let ratelist = [];
      if (result.progressAt1) {
        ratelist.push(`准备工作[${result.progressAt1.split(" ")[0]}]`);
      } else {
        ratelist.push("准备工作[暂无限制]");
      }
      if (result.progressAt2) {
        ratelist.push(`基础调查[${result.progressAt2.split(" ")[0]}]`);
      } else {
        ratelist.push("基础调查[暂无限制]");
      }
      if (result.progressAt3) {
        ratelist.push(`编制方案[${result.progressAt3.split(" ")[0]}]`);
      } else {
        ratelist.push("编制方案[暂无限制]");
      }
      if (result.progressAt4) {
        ratelist.push(`咨询论证[${result.progressAt4.split(" ")[0]}]`);
      } else {
        ratelist.push("咨询论证[暂无限制]");
      }
      if (result.progressAt5) {
        ratelist.push(`审查审核[${result.progressAt5.split(" ")[0]}]`);
      } else {
        ratelist.push("审查审核[暂无限制]");
      }
      if (result.progressAt6) {
        ratelist.push(`审批公告[${result.progressAt6.split(" ")[0]}]`);
      } else {
        ratelist.push("审批公告[暂无限制]");
      }

      this.rateArr = ratelist;
    });
  },
  components: {
    tableHeader,
    rightDiv,
  },
  data() {
    return {
      isExpand:false,
      listquery: {
        pageSize: 10,
        currentPage: 1,
        agreeNickName: "",
        completionYear: 2021,
        city: "",
        country: "",
        town: "",
        village: "",
        progressName: "",
        subProgressTitle: "",
        nodName: "",
        iCheckType: "3",
         isMerge:true,
      },

      role: "",
      years: ["2021", "2022", "2023", "已完成"],
      chaoqidata: [],
      form: {},
      filterShow: true,
      isloading: false,
      warnningvillagetotal: 0,
      dialogVisible: false,
      reasondialogVisible: false,
      warningMessage: "",
      warningdata: [],
      tableData: [],
      rightPanelShow: false,
      resultList: [],
      rateArr: [],
      total: "",
      reason: [],
      AAA:{},
      smalljieduans: [
        { nameDate: "市州准备[2021-8-30]", name: "市州准备" },
        { nameDate: "区县开会[2021-8-30]", name: "区县开会" },
        { nameDate: "底图底数领取[2021-8-30]", name: "底图底数领取" },
        { nameDate: "确定编制技术单位[2021-8-30]", name: "确定编制技术单位" },
        { nameDate: "业务培训[2021-8-30]", name: "业务培训" },
        { nameDate: "基础调查[2021-9-30]", name: "基础调查" },
        { nameDate: "编制方案[2021-11-05]", name: "编制方案" },
        { nameDate: "咨询论证[2021-11-30]", name: "咨询论证" },
        { nameDate: "方案表决[2021-12-15]", name: "方案表决" },
        { nameDate: "方案审查[2022-1-15]", name: "方案审查" },
        { nameDate: "数据审核比对[2022-1-31]", name: "数据审核比对" },
        { nameDate: "审批公告[2022-2-28]", name: "审批公告" },
      ],
      reasonOptions: ["排会原因", "上传进度包不及时", "未完成", "其他原因"],
      warnState: {
        1: "noclick",
        2: "active",
        3: "chaoshi",
        4: "weidao",
        5: "chaoqiover",
      },
      rowId: "",
    };
  },
  computed: {
    ...mapGetters(["citylist"]),
  },
  mixins: [queryMixin],

  methods: {
        expand(data,row) {
      data.state = row;
     
      this.AAA.set(data.id,row)
    },
   objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     if (columnIndex >2) {
        if (row.children && row.state){
            return {
              rowspan: row.children.length+1,
              colspan: 1
            };
        }else if(row.isChildren){
          return{
              rowspan: 1,
              colspan: 0
          }
        }else{
            return {
              rowspan: 1,
              colspan: 1
            };
        }
     }
        
      
      },
    updateTable() {
      this.isloading = true;
      flashwarningdata()
        .then((res) => {
          if (res.success) {
            this.$notify({
              title: "成功",
              message: "刷新完毕",
              type: "success",
              offset: 0,
            });
            this.isloading = false;
          }
        })
        .catch((e) => {
          this.isloading = false;
          this.$message.error(e.response.data.message);
        });
    },
    //进度条颜色
    //进度条颜色
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#0000CD";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    format(percentage) {
      return `${percentage}%`;
    },
    query(row) {
      this.dialogVisible = true;
      this.warningMessage = row.warning;
      this.warningdata = row.warningData;
    },
    inputreason(row) {
      this.rowId = row.id;
      this.reasondialogVisible = true;
    },

    searchreason(row) {
      this.$alert(row.warning, "阶段预警原因", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    submitWarnReason() {
      let id = this.rowId;
      let reasons = this.reason;
      villagewarning({
        id: id,
        warning: reasons.toString(),
      })
        .then((res) => {
          if (res.success) {
            this.reasondialogVisible = false;
            this.$message.success("上报成功");
            this.getdata();
          } else {
            this.$message.success(res.message);
          }
        })
        .catch((e) => {
          this.$message.error(e.response.data.message);
        });
    },

    openstate(id, name) {
      this.title = name;
      this.rightPanelShow = true;
      this.resultList = [];
      this.tableData.forEach((element) => {
        if (
          element.id == id &&
          element.progressList != "" &&
          element.progressList[name]
        ) {
          let objv = element.progressList[name].content;
          if (objv) {
            objv.forEach((v, i) => {
              let imgslist = objv[i].files;
              // let recordlist = objv[i].record;
              let treelist = [];
              let treelist1 = [];
              if (imgslist) {
                // imgslist = imgslist.split(",");
                imgslist.forEach((element) => {
                  let label = element.substring(element.lastIndexOf("/") + 1);
                  let obj = {
                    label: label,
                    url: element,
                  };
                  treelist.push(obj);
                });
              }
              objv[i].Imglist = treelist;
              this.resultList.push(objv[i]);
            });
          }
        }
      });
    },
    closeRightPane() {
      this.rightPanelShow = false;
    },
    async getdata() {
      this.isloading = true;
      let res = await areaprogresswarninglist(this.listquery);
      res.data.content.forEach((v) => {
        v.progressNames.forEach((p) => {
          v.progressNames[p.name] = p.count;
        });
      });
      res.data.content.forEach((v) => {
        if (v.warningData && v.warningData.length > 0) {
          this.rateArr.forEach((rate) => {
            v.warningData[rate.split("[")[0]] = {
              day: null,
              state: 0,
            };
          });

          v.warningData.forEach((p) => {
            if (p.day >= 0 && p.count < 100) {
              v.warningData[p.name] = {
                day: p.day,
                state: 4,
              };
            } else if (p.day < 0 && p.count < 100) {
              v.warningData[p.name] = {
                day: p.day * -1,
                state: 3,
              };
            } else if (p.day < 0 && p.count == 100) {
              v.warningData[p.name] = {
                day: p.day * -1,
                state: 5,
              };
            }
          });
        }
      });

      this.tableData = res.data.content;
      this.warnningvillagetotal = res.data.totalElements;
      this.total = res.data.totalElements;
     this.tableData.forEach((element) => {
        if (element.children) {
          if(this.AAA.has(element.id)){
            element.state = this.AAA.get(element.id)
          }else{
            element.state = this.isExpand;
           }
        }
         
      });
       this.AAA=new Map()
      this.isloading = false;

    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../public/css/table.scss";
@import "../../../../public/css/countheader.scss";
.totalmessage {
  padding: 10px 0px;
  margin-right: 20px;
  border-top: 1px dashed #ccc;
  font-size: 24px;
  color: #4778c7;
}
.header {
  font-size: 14px;
  font-weight: 600;
  line-height: 35px;
  margin-right: 5px;
  border-bottom: 1px dashed #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    color: #4778c7;
    margin-right: 5px;
    font-weight: 700;
    font-size: 16px;
  }
}
.warning-container {
  margin: 5px;
  padding-bottom: 10px;
  overflow-y: auto;
  position: relative;
  height: 100%;
}

// ::v-deep .el-select .el-input {
//   width: 300px;
// }
// ::v-deep .el-input__inner {
//   width: 300px;
// }
.row-area {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.countryArea {
  height: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;

  li {
    text-align: center;
    margin-right: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    cursor: pointer;
  }

  .active {
    border-bottom: 3px solid black;
  }

  .areaActive {
    background-color: #4cc8c7;
    color: #fff;
    border-radius: 5px;
    padding: 0 10px;
  }
}

::v-deep .el-progress-bar__outer {
  height: 15px !important;
}

::v-deep .el-table thead.is-group th {
  /* background: #f5f7fa; */
  background-color: #8e98b5;
}

.progressli {
  display: flex;
  justify-content: space-between;
  align-items: center;
  ::v-deep .el-progress {
    width: 130px;
  }
  .spanicon {
    width: 23px;
    height: 23px;
    font-size: 10px;
    border-radius: 50%;
    margin-left: 5px;
  }
}
.active {
  // background-color: #4778c7;
  color: #fff;
  cursor: pointer;
  // border: 1px solid #4778c7;
}
.noclick {
  pointer-events: none !important;
}

.chaoshi {
  background-color: rgb(255, 48, 48, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 48, 48, 0.7);
}
.chaoqiover {
  background-color: rgb(0, 134, 139, 0.7);
  color: #fff;
  border: 1px solid rgb(0, 134, 139, 0.7);
}
.weidao {
  background-color: #e6a23c;
  color: #fff;
  border: 1px solid #e6a23c;
}

.redicon {
  color: red;
}

.warnig-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #4778c7;
  line-height: 35px;

  .warning-title {
    font-size: 14px;
    padding-left: 5px;
  }

  .warnig-num {
    font-size: 24px;
    font-weight: 600;
    color: red;
  }
}

::v-deep .el-badge__content.is-fixed {
  position: absolute;
  top: 5px;
  right: 50px;
  -webkit-transform: translateY(-50%) translateX(100%);
  transform: translateY(-50%) translateX(100%);
}

.warn {
  background-color: #cd5555;

  i {
    font-size: 18px;
  }
}
</style>